<!-- 资金统计 -->
<template>
    <div class="capitalRecord">
        <div>
            <div class="header">资金统计</div>
            <!-- 条件筛选 -->
            <div class="screen">
                <div class style="float:right">
                    <span class="demonstration">渠道：</span>
                    <el-select v-model="screen.platform" filterable placeholder="请选择渠道" @change="getFundCountList(1)">
                        <el-option v-for="item in options" :key="item.id" :label="item.companyName" :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData" max-height="500" min-height="200" border style="width: 100%">
                <el-table-column prop="companyName" label="渠道名称" width="180"></el-table-column>
                <el-table-column prop="sumUp" label="预存款总额" width="180"></el-table-column>
                <el-table-column prop="deposit" label="预存款余额" width="180"></el-table-column>
                <el-table-column prop="fee" label="授信总额" width="180"></el-table-column>
                <el-table-column prop="quota" label="授信余额"></el-table-column>
            </el-table>
            <pagination v-show="screen.total > 0" :total="screen.total" :page.sync="screen.pageNum" :limit.sync="screen.pageSize" @pagination="getFundCountList(1)" />
        </div>
        <div>
            <div class="header">采购金额统计</div>
            <!-- 条件筛选 -->
            <div class="screen">
                <div class style="float:right">
                    <span class="demonstration">渠道：</span>
                    <el-select v-model="purchase.platform" filterable placeholder="请选择渠道" @change="getPurchaseAmountList(1)">
                        <el-option v-for="item in options2" :key="item.id" :label="item.companyName" :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <!-- 表格 -->
            <el-table :data="tableDatas" max-height="500" min-height="200" border style="width: 100%">
                <el-table-column prop="date" label="月份"></el-table-column>
                <el-table-column prop="purchaseAmount" label="采购金额"></el-table-column>
            </el-table>
            <!-- <pagination
                v-show="purchase.total > 0"
                :total="purchase.total"
                :page.sync="purchase.pageNum"
                :limit.sync="purchase.pageSize"
                @pagination="getPurchaseAmountList(1)"
            /> -->
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getFundCount, getPurchaseAmount, getCompany } from '@/api/dateCenter';

export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'userRecord',
    components: {},
    data() {
        //这里存放数据
        return {
            // 筛选数据
            // 资金统计
            screen: {
                platform: null, // 渠道
                total: 0, // 总条数
                pageNum: 1, // 页码
                pageSize: 10 // 每页请求个数
            },
            // 采购金额统计
            purchase: {
                platform: '全部渠道' // 渠道
            },
            options: [],
            options2: [],
            tableData: [],
            tabledatas: [],
            tableDatas: []
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 搜索
        handleQuery() {},
        // 重置
        resetQuery() {},
        /** 查询申请额度记录列表 */
        getList() {
            // listEdu(this.queryParams, 1).then(response => {
            //     this.eduList = response.rows;
            //     this.eduList.forEach((item, index) => {
            //         if (item.status == 0) {
            //             this.eduList[index].status = '待审核';
            //         } else if (item.status == 1) {
            //             this.eduList[index].status = '审核通过';
            //         } else if (item.status == 2) {
            //             this.eduList[index].status = '审核不通过';
            //         } else if (item.status == 3) {
            //             this.eduList[index].status = '授信成功';
            //         }
            //         if (!item.sfee) {
            //             this.eduList[index].sfee = '-';
            //         }
            //     });
            //     this.total = response.total;
            // });
        },
        //  点击时间
        onTime() {
            // this.getList();
        },
        // 资金统计
        getFundCountList(num) {
            if (num) {
                let datas = {
                    companyId: this.screen.platform,
                    size: this.screen.pageSize,
                    current: this.screen.pageNum
                };
                getFundCount(datas).then(res => {
                    console.log(res);
                    this.tableData = res.data.fundCountDto;
                    this.screen.total = res.data.total;
                });
            } else {
                let datas = {
                    size: this.screen.pageSize,
                    current: this.screen.pageNum
                };
                getFundCount(datas).then(res => {
                    console.log(res);
                    this.tableData = res.data.fundCountDto;
                    this.screen.total = res.data.total;
                });
            }
        },
        // 采购金额统计
        getPurchaseAmountList(num) {
            if (num) {
                console.log(this.purchase.platform);

                let datas = {
                    companyId: this.purchase.platform
                };
                getPurchaseAmount(datas).then(res => {
                    if (res.code == 200) {
                        this.tableDatas = res.data;
                    } else {
                        this.tableDatas = '';
                    }
                });
            } else {
                let datas = {};
                getPurchaseAmount(datas).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.tableDatas = res.data;
                    } else {
                        this.tableDatas = '';
                    }
                });
            }
        },
        // 获取渠道
        getCompanys() {
            getCompany().then(res => {
                this.options = res.data;
                this.options2 = res.data;
                this.options.unshift({
                    id: null,
                    companyName: '全部渠道'
                });
            });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getCompanys();
        this.getFundCountList();
        this.getPurchaseAmountList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
/* //@import url(); 引入公共css类 */
.capitalRecord {
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    margin: 20px;
    border-radius: 4px;
    > div {
        margin-bottom: 60px;
    }
    .header {
        width: 100%;
        height: 40px;
        font-size: 18px;
        line-height: 26px;
        padding: 0 0 0 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #333;
        font-weight: 600;
        margin-top: 20px;
    }
    .screen {
        overflow: hidden;
        margin-top: 20px;
        height: auto;
        > div {
            float: left;
            margin: 0 20px 20px 0;
        }
        .btns {
            margin: 4px 0 20px 0;
        }
    }
}
</style>
